<template>
  <div id="mainchart" style="width: 100%; height: 540px; float: left"></div>
</template>

<script>
import * as echarts from "echarts";
// import { getselectRoomBedSum } from "@/api/system/emporty";
export default {
  name: "totalStati",
  data() {
    return {
      totalmyChart: "",
    };
  },
  //   created() {
  //     this.selectRoomBedList();
  //   },
  mounted() {
    this.selectRoomBedList();
    window.addEventListener("resize", () => {
      if (this.totalmyChart) {
        this.totalmyChart.resize();
      }
    });
  },
  beforeDestroy() {
    if (!this.totalmyChart) {
      return;
    }
    this.totalmyChart.dispose();
    this.totalmyChart = null;
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.totalmyChart.resize();
    });
  },
  methods: {
    selectRoomBedList() {
      this.drawLine();
    },
    drawLine() {
      this.totalmyChart = echarts.init(document.getElementById("mainchart"));
      this.totalmyChart.setOption({
        // title: {
        //   text: "Stacked Line",
        // },
        // tooltip: {
        //   trigger: "axis",
        // },
        // legend: {
        //   data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        //   padding: [35, 0, 0, 0],
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        // xAxis: {
        //   type: "category",
        //   boundaryGap: false,
        //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        // },
        // yAxis: {
        //   type: "value",
        // },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["预约车辆", "签到车辆"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        // calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        // color: ['#c23531', '#2f4554', '#61a0a8'],
        series: [
          {
            name: "预约车辆",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            // markPoint: {
            //   data: [
            //     { type: "max", name: "Max" },
            //     { type: "min", name: "Min" },
            //   ],
            // },
            // markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            itemStyle: {
              color: "#19b7a6",
            },
          },
          {
            name: "签到车辆",
            type: "bar",
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
            // markPoint: {
            //   data: [
            //     { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
            //     { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
            //   ],
            // },
            // markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            itemStyle: {
              color: "#fec05a",
            },
          },
        ],
        // series: [
        //   {
        //     name: "Email",
        //     type: "line",
        //     symbol:'none',
        //     smooth:true,
        //     stack: "Total",
        //     data: [120, 132, 101, 134, 90, 230, 210],
        //   },
        //   {
        //     name: "Union Ads",
        //     type: "line",
        //     symbol:'none',
        //     smooth:true,
        //     stack: "Total",
        //     data: [220, 182, 191, 234, 290, 330, 310],
        //   },
        //   {
        //     name: "Video Ads",
        //     type: "line",
        //     symbol:'none',
        //     smooth:true,
        //     stack: "Total",
        //     data: [150, 232, 201, 154, 190, 330, 410],
        //   },
        //   {
        //     name: "Direct",
        //     type: "line",
        //     symbol:'none',
        //     smooth:true,
        //     stack: "Total",
        //     data: [320, 332, 301, 334, 390, 330, 320],
        //   },
        //   {
        //     name: "Search Engine",
        //     type: "line",
        //     symbol:'none',
        //     smooth:true,
        //     stack: "Total",
        //     data: [820, 932, 901, 934, 1290, 1330, 1320],
        //   },
        // ],
      });
    },
  },
};
</script>
<style scoped>
</style>
